<template>
  <div id="app">
    <h1>常用组件示例</h1>
    <div class="exp-box">
      <h2>表格组件</h2>
      <PublicTable
        :t-data="tableData"
        :table-total="tableTotal"
        :current-page="currentPage"
        :show-pagination="true"
        :offset-height="'600'"
        @clickOperaBtn="clickOperaBtn"
        @clickSwitch="clickSwitch"
        @changePagination="changePagination"></PublicTable>
        <span>{{ tableInfo }}</span>
    </div>
    <el-divider></el-divider>
    <div class="exp-box">
      <h2>表单组件</h2>
      <QueryForm
        v-if="queryConfig"
        :default-model="queryConfig"
        :btn-load="loading"
        @getFormData="getFormData(arguments)"></QueryForm>
        <span>{{queryInfo}}</span>
    </div>
    <el-divider></el-divider>
    <div class="exp-box">
      <h2>上传组件</h2>
      <FileUpload 
        :file-size="fileSize"
        :file-type="fileType"
        :is-show-tip="false"
        :show-file="false"
        :interface="uploadLink"
        :limit="10"
        style="margin-top: 15px;"
        @onSuccess="(res,file)=>getUploadFile(res,file,'attachment')"/>
    </div>
    <el-divider></el-divider>
    <div class="exp-box">
      <h2>文件预览组件</h2>
    </div>
    <el-divider></el-divider>
    <div class="exp-box">
      <h2>防抖&节流</h2>
      <el-button v-debounce:1000="handleConsole">测试防抖</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/index'
import PublicTable from './components/PublicTable/publicTable.vue'
import QueryForm from './components/QueryForm/queryForm.vue'
import { queryConfig } from './utils/queryConfig';
import FileUpload from './components/FileUpload/fileUpload.vue';

export default {
  name: 'App',
  components: {
    PublicTable,
    QueryForm,
    FileUpload
  },
  data(){
    return{
      loading:false,
      // 表格数据
      tableData:[],
      tableTotal:0,
      currentPage:'main-page',
      // 显示对当前表格的一些操作
      tableInfo:'当前没有对表格进行操作',
      // 查询数据
      queryParams: {},
      // 查询配置
      queryConfig: this.jsonClone(queryConfig['mainQuery']),
      // 显示当前表单组件的一些操作
      queryInfo:'当前没有对查询组件进行操作',
      fileList: [],
      // 上传地址
      uploadLink: `/admin/attachment/upload`,
      // 上传文类型限制
      fileType: ['jpeg', 'jpg', 'gif', 'png', 'avi', 'mp4', 'mov', 'wav', 'mp3', 'xls', 'xlsx', 'doc', 'docx', 'ppt', 'pptx', 'pdf', 'txt'],
      // 上传文件大小限制
      fileSize: {
        dom: 100,
        media: 1024
      },
      // 输入框值
      input:''
    }
  },
  mounted(){
    api.getDataList(this.queryParams).then(res=>{
      this.tableData = res.dataList
      this.tableTotal = 64
    })
  },
  methods:{
    /**
     * @description 表格操作回传
     * @param {obj} item 参数
     * @param {str} type 按钮类型
     * @param {str} val 按钮类型
     */
    clickOperaBtn(item, type, val){
      this.tableInfo = `对编号为${item.id}的商品${item.title}进行了${type}操作`
    },

    /**
     * 切换switch
     * @param {str} val 切换值
     * @param {obj} item 表格行数据
     * @returns {undefined} 无
     */
    clickSwitch(val,item){
      this.tableInfo = `对编号为${item.id}的商品${item.title}进行了${val===0?'下架':'上架'}操作`
    },

    // 分页操作
    changePagination(pagination){
      this.tableInfo = `切换到第${pagination.pageNum}，一页显示${pagination.pageSize}条内容`
    },

    /**
     * @description: 获取查询参数
     * @param {Array} arg 参数
     */
     getFormData(arg) {
      console.log(arg)
      const param = arg[0] ? arg[0] : {};
      const btnType = arg[1];
      // this.pagination.pageNum = 1;
      // this.pagination.pageSize = 20;
      if (btnType === 'query') {
        this.queryParams = {
          ...param
        };
        this.queryInfo = `执行查询操作，查询内容为:编号-${this.queryParams.id} 类型-${this.queryParams.cata} 时间-${this.queryParams.upTime}`
      } else {
        this.queryParams = {};
        this.queryInfo = `执行重置操作`
      }
      if (['query', 'reset'].includes(btnType)) {
        // this.getList();
      }
      if (btnType === 'newAdd') {
        // this.addMsg();
        this.queryInfo = `执行新增商品操作`
      }
    },

    // 文件上传结束
    getUploadFile(res, file,type) {
      if (res.code === 0) {
        // 拿到文件具体格式
        const fileName = file.name.split('.');
        const fileExt = fileName[fileName.length - 1];
        var attachment = {
          attachId: res.data.id,
          attachName: file.name,
          attachType: res.data.attachType,
          status: '已完成',
          resourceUrl: res.data.url,
          fileType: fileExt,
          filePath: res.data.url
        };
        // this.themeData.courseAttachments.push(attachment);
        this.fileList = [];
      }
    },

    // 点击防抖按钮
    handleConsole(){
      console.log('测试防抖')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
